<template>
  <div class="Toolbar" :style="{ width: ToolbarWidth + 'px' }">
    <Toolbar :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
  </div>
  <div class="title" :style="{ width: titleWidth + 'px' }" v-if="isanswer">
    <el-input
      v-model="Editordata.title"
      :rows="2"
      type="textarea"
      placeholder="请输入标题（最多100字）"
      maxlength="100"
      show-word-limit
    />
  </div>
  <div
    class="Editor"
    :style="{ width: EditorWidth + 'px', height: EditorHeight + 'px' }"
  >
    <Editor
      style="height: 100%; overflow-y: hidden"
      v-model="Editordata.valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
      @onChange="onChange"
    />
  </div>
  <div class="upload" :style="{ width: uploadWidth + 'px' }" v-if="isanswer">
    <!-- 发布设置待定  -->
    <span>发布设置</span>
    <div class="switch" v-if="isanswer">
      <span>是否为文章 </span>
      <el-switch
        v-model="Editordata.type"
        class="ml-2"
        inline-prompt
        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
        active-text="是"
        inactive-text="否"
        :disabled="reward"
      />
      <div class="reward" v-if="reward">
        赏金金额
        <el-select
          v-model="Editordata.reward"
          class="m-2"
          placeholder="赏金金额"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>

    <div class="cover" v-if="isanswer">
      <div class="text">添加封面</div>
      <div>
        <el-upload
          class="avatar-uploader"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
        <div style="color: #8e8e8e; margin-top: 10px">
          图片上传格式支持 JPEG、JPG、PNG
        </div>
      </div>
    </div>
    <!-- <div v-else class="anonymity">
      <div>匿名设置</div>
      <el-radio-group v-model="radio1" class="ml-4">
        <el-radio label="0" size="large">不启用匿名</el-radio>
        <el-radio label="1" size="large">启用匿名</el-radio>
      </el-radio-group>
    </div> -->
  </div>
  <div
    :class="{ issue: issueWidth == 100, issue1: issueWidth > 100 }"
    :style="{
      width: issueWidth <= 100 ? issueWidth + '%' : issueWidth + 'px',
    }"
  >
    <div class="foot" :style="{ width: footWidth + 'px' }">
      <div class="z">
        <span>回到顶部</span> <span>字数{{ textlength }}</span>
      </div>
      <div class="y">
        <el-button @click="issueclick" type="primary">{{ text }}</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import "@wangeditor/editor/dist/css/style.css"; // import css

import { onBeforeUnmount, reactive, ref, shallowRef } from "vue";
import { useStore } from "vuex";
import { useRoute } from "vue-router";

import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { editor } from "@/p-store/editor";

export default {
  components: { Editor, Toolbar },
  props: {
    ToolbarWidth: {
      type: Number,
      default: 1370,
    },
    titleWidth: {
      type: Number,
      default: 1000,
    },
    EditorWidth: {
      type: Number,
      default: 1000,
    },
    EditorHeight: {
      type: Number,
      default: 700,
    },
    uploadWidth: {
      type: Number,
      default: 1000,
    },
    issueWidth: {
      type: Number,
      default: 100,
    },
    footWidth: {
      type: Number,
      default: 1000,
    },
    mode: {
      type: String,
      default: "default", //simple 简洁模式
    },
    isanswer: {
      type: Boolean,
      default: true,
    },
    articleid: {
      type: Number,
      default: 0,
    },
  },

  setup(props) {
    const store = editor();
    const storex = useStore();
    const router = useRoute();
    const reward = router.query.issue;
    const editorRef = shallowRef();
    //文章 内容
    const Editordata = reactive({
      valueHtml: "",
      title: "",
      type: false,
      reward: null,
    });

    const toolbarConfig = {};

    const editorConfig = {
      placeholder: props.isanswer ? "请开始你的创作" : "发表你的评论",
    };
    onBeforeUnmount(() => {
      const editor = editorRef.value;
      if (editor == null) return;
      editor.destroy();
    });
    const handleCreated = (editor) => {
      editorRef.value = editor; // record editor instance
    };
    const textlength = ref(0);
    const foo = (e) => {
      var nb = 0;
      Object.keys(e.children).forEach((item) => {
        nb += e.children[item].children[0].text.length;
      });
      return nb;
    };
    const tm = ref(true);
    const onChange = (e) => {
      textlength.value = foo(e);
      //监测界面上编辑操作
      //节流
      if (tm.value) {
        setTimeout(() => {
          store.handletext(Editordata.valueHtml);
          tm.value = true;
        }, 3000);
      }
      tm.value = false;
    };
    const text = props.isanswer ? "发布" : "发布评论";
    const issueclick = () => {
      console.log("00000点击了发布");
      console.log(Editordata);
      if (props.isanswer) {
        storex.dispatch("comment/putarticle", Editordata);
      } else {
        storex.dispatch("comment/putanswer", {
          ...Editordata,
          articleid: props.articleid,
        });
      }
    };
    //单选
    const radio1 = ref("1");
    const issue = ref(props.issueWidth > 90 ? " issue1" : "issue ");
    console.log(issue.value);
    //文章选择 默认是的

    const options = [
      {
        value: 5,
        label: 5,
      },
      {
        value: 10,
        label: 10,
      },
      {
        value: 15,
        label: 15,
      },
      {
        value: 50,
        label: 50,
      },
    ];
    return {
      editorRef,
      toolbarConfig,
      editorConfig,
      handleCreated,
      onChange,
      textlength,
      text,
      radio1,
      issue,
      issueclick,
      Editordata,
      reward,
      options,
    };
  },
};
</script>   
<style scoped lang="less">
.title {
  margin: auto;
  /deep/.el-textarea {
    font-size: 25px;
  }
}
.Toolbar {
  margin-bottom: 10px !important;
  margin: auto;
  /deep/.w-e-bar {
    margin: auto;
    border-radius: 10px;
  }
}

.Editor {
  margin: auto;
  /deep/.w-e-text-container {
    border-radius: 10px;
  }
}
.upload {
  margin: auto;
  background-color: #fff;
  border-top: 1px solid #f5f5f5;
  > span {
    margin-left: 10px;
  }
  .switch {
    margin-left: 20px;
    .reward {
      margin-bottom: 10px;
    }
  }
  .cover {
    display: flex;
    .text {
      margin: 20px 20px 0 20px;
    }
  }
  .anonymity {
    display: flex;
    align-items: center;
    > div {
      margin-right: 20px;
      margin-left: 10px;
    }
  }
}
/deep/.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 100px;
  text-align: center;
}
.issue1 {
  height: 49px;
  background-color: #ffffff;

  border-top: 1px solid #e8e8e8;
  .foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    margin: auto;
    .z {
      margin-left: 10px;
    }
    .y {
      margin-right: 10px;
    }
  }
}
.issue {
  height: 49px;
  background-color: #ffffff;
  position: fixed;
  bottom: 0;
  border-top: 1px solid #e8e8e8;
  .foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    margin: auto;
    .z {
      margin-left: 10px;
    }
    .y {
      margin-right: 10px;
    }
  }
}
</style> 